<template>
  <div class="main">
 
    <div class="componentsss">
      <component :is="currentComponent"></component>
    </div>
    <div class="mainbottom">
      <button @click="changebg(item,index)" v-for="(item, index) in ButtonGroup" :key="index" class="iconfont" :class="[item.iconname
      ,{ isSetted: currentInde === index}]">
        <!-- <span> {{ item.iconname }}</span> -->
        <div>{{ item.name }}</div>
      </button>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue';

import deviceDataView from './components/deviceDataView.vue';
import deviceInforViewVue from './components/deviceInforView.vue';
import groupingViewVue from './components/groupingView.vue';
import screeningViewVue from './components/screeningView.vue';
const currentComponent=ref(deviceDataView)
const ButtonGroup=ref([
  {
    iconname:'icon-shebeixinxi',
    name:'设备信息',
    currentComponent:deviceDataView
  },
  {
    iconname:'icon-liuchengshuoming',
    name:'分组操作',
    currentComponent:groupingViewVue
  }, {
    iconname:'icon-icon-test',
    name:'设备显示',
    currentComponent:screeningViewVue
  }, {
    iconname:'icon--shebeicanshu',
    name:'设备参数',
    currentComponent:deviceInforViewVue
  }
])
const currentInde =ref(0)
const changebg=(item,index)=>{
currentInde.value=index
currentComponent.value=item.currentComponent
}
</script>
<style lang="less" scoped>
@import url('./device_management.less');
@import url('./shebieicon/iconfont.css');
</style>
